<template>
    <section class="resource-lib-container">
        <el-tabs type="border-card" v-model="activeTab">
            <template v-for="(item, index) in tabs">
                <el-tab-pane :key="index" :label="item.label" :name="item.name">
                    <div class="resource-container" :key="item.name">
                        <!--                        <component-->
                        <!--                            class="resource-tree-wrap"-->
                        <!--                            :is="item.tree"-->
                        <!--                            :ref="item.name"-->
                        <!--                            width="200px"-->
                        <!--                            v-bind="tree"-->
                        <!--                            v-model="spaceId[item.name]"-->
                        <!--                        />-->
                        <component
                            class="resource-select-wrap scrollbar"
                            :is="item.component"
                            :spaceId="spaceId[item.name]"
                            :search="search[item.name]"
                            :ref="item.name"
                            :key="item.name"
                            :resourceType="resourceType"
                            :uploadOption="uploadOption"
                            v-bind="item"
                            @handleSelectImage="handleSelectImage"
                        />
                    </div>
                </el-tab-pane>
            </template>
        </el-tabs>
        <div class="search-wrap">
            <div class="cut-wrap jee-hover-color2" v-if="isShowCut" @click="handleCropper">
<!--                <jee-icon iconClass="caijian1"/>-->
                <span>裁剪</span>
            </div>
            <el-input v-model="search[activeTab]"
                      maxlength="50"
                      @keyup.enter.native="handleSearch"
                      size="small" placeholder="请输入文件名称"
                      style="width:265px;"
            >
                <el-button slot="append"
                           size="small" class="jee-bg-light-important search-btn"
                           @click="handleSearch">
<!--                    <jee-icon iconClass="xiazai15" style="fill: #ffffff"></jee-icon>-->
                </el-button>
            </el-input>
        </div>
        <!-- 裁剪 -->
        <el-dialog title="图片裁剪" :visible.sync="dialogVisible" append-to-body>
            <div class="cropper-content">
                <div class="cropper-wrap">
                    <vueCropper
                        ref="cropper"
                        :img="file[activeTab].imageUrl"
                        :info="option.info"
                        :full="option.full"
                        :outputSize="option.outputSize"
                        :outputType="suffix"
                        :canMove="option.canMove"
                        :canMoveBox="option.canMoveBox"
                        :centerBox="option.centerBox"
                        :fixedBox="option.fixedBox"
                        :fixed="fixed"
                        :original="option.original"
                        :autoCrop="option.autoCrop"
                        :autoCropWidth="option.autoCropWidth"
                        :autoCropHeight="option.autoCropHeight"
                        :high="option.high"
                        @realTime="realTime"
                    />
                </div>
                <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px'}">
                    <div :style="previews.div">
                        <img :src="previews.url" :style="previews.img">
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size='small' @click="dialogVisible = false">取 消</el-button>
                <el-button size='small' type="primary" @click="handleSubmit">确认</el-button>
            </div>
        </el-dialog>
    </section>

</template>
<script>
    import ResourceSelect from './ResourceSelect'
    import SpaceResourceTree from './SpaceResourceTree'
    import ResourceTree from './ResourceTree'
    import {VueCropper} from 'vue-cropper'
    import {getImgToBase64} from '@/utils'

    export default {
        name: 'ResourceCont',
        components: {
            ResourceSelect,
            ResourceTree,
            SpaceResourceTree,
            VueCropper
        },
        inject: ['uploadOption'],
        props: {
            resourceType: {
                type: String,
                default: ''
            },
            isMultiSelect: {
                type: Boolean,
                default: true
            },
            fixed: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                search: {
                    MyResource: '',
                    ShareResource: ''
                },
                spaceId: {
                    MyResource: '',
                    ShareResource: ''
                },
                tree: {
                    loading: false,
                    currentNodeKey: '',
                    createChildren: false,
                    defaultProps: {
                        children: 'children',
                        label: 'label'
                    }
                },
                file: {
                    MyResource: {},
                    ShareResource: {}
                },
                activeTab: 'MyResource',
                tabs: [
                    {
                        label: '正文图片集',
                        name: 'MyResource',
                        component: 'ResourceSelect',
                        tree: 'ResourceTree',
                        api: '',
                        result:[]
                    }
                ],
                dialogVisible: false,
                suffix: 'png',
                option: {
                    autoCropWidth: 100,
                    autoCropHeight: 100,
                    info: true, // 裁剪框的大小信息
                    outputSize: 1, // 裁剪生成图片的质量
                    outputType: 'png', // 输出图片格式
                    canScale: true, // 图片是否允许滚轮缩放
                    autoCrop: true, // 是否默认生成截图框
                    fixedBox: false, // 固定截图框大小 不允许改变
                    fixed: false, // 是否开启截图框宽高固定比例
                    full: false, // 是否输出原图比例的截图
                    canMove: true, // 能否拖动图片
                    canMoveBox: true, // 截图框能否拖动
                    original: false, // 上传图片按照原始比例渲染
                    centerBox: false, // 截图框是否被限制在图片里面
                    high: true // 是否根据dpr生成适合屏幕的高清图片
                },
                previews: {},
                percentage: 0
            }
        },
        computed: {
            isShowCut() {
                return (this.activeTab === 'MyResource' && (this.resourceType === 'insertimage' || this.resourceType === 'simpleupload'))
                //  && this.file[this.activeTab] && this.file[this.activeTab].imageUrl
            }
        },
        methods: {
            getHtml(url, name, id) {
                let html = '';
                switch (this.resourceType) {
                    case 'insertvideo':
                        if (url.substr(-4) === '.flv') {
                            html = `<p style="height:0px"></p><p><embed src='${url}' style='max-width:750px'/></p>`
                        } else {
                            html = `<p style="height:0px"></p><p><video controls src='${url}' style='max-width:750px'>no video</video></p>`
                        }
                        break;
                    case 'music':
                        html = `<p style="height:0px"></p><p><audio class="voice" controls src='${url}'>no audio</audio></p>`;
                        break;
                    case 'attachment':
                        html = `<a href='${url}' download='${url}'>${name}</a>`;
                        break;
                    default:
                        html = `<p style="text-align: center"><img src='${url}' style='max-width:750px' alt='${id}'/></p>`
                }
                return html
            },
            handleSearch() {
                // this.$refs[this.activeTab][1].fetchResourceList()
            },
            // 点击裁剪
            handleCropper() {
                this.dialogVisible = true
            },
            // 实时预览函数
            realTime(data) {
                this.previews = data
            },
            // 获取截图数据
            handleSubmit() {
                this.$refs.cropper.getCropBlob((data) => {
                    let files = new File([data], this.file[this.activeTab].name, {
                        type: 'image/png',
                        lastModified: Date.now()
                    });
                    this.file[this.activeTab].file = {raw: files};
                    this.file[this.activeTab].imageUrl = URL.createObjectURL(data);
                    this.dialogVisible = false
                })
            },
            // 选择图片
            handleSelectImage(item) {
                const that = this;
                // 多选上传
                if (item instanceof Array) {
                    this.file[this.activeTab] = item.map(d => {
                        d.name = d.alias + d.suffix;
                        d.resourceId = d.id;
                        const getDefaultFile = function (dataUrl) {
                            d.imageUrl = dataUrl
                        };
                        if (that.activeTab === 'MyResource') {
                            getImgToBase64(that.$getPath(d.url), getDefaultFile)
                        }
                        return d
                    })
                } else if (item.url) {
                    // 单选上传
                    this.file[this.activeTab].name = item.alias + item.suffix;
                    this.file[this.activeTab].url = item.url;
                    this.file[this.activeTab].resourceId = item.id;
                    this.file[this.activeTab].videoCover = item.videoCover;
                    const getDefaultFile = function (dataUrl) {
                        that.$set(that.file[that.activeTab], 'imageUrl', dataUrl)
                    };
                    if (this.activeTab === 'MyResource') {
                        getImgToBase64(this.$getPath(item.url), getDefaultFile)
                    }
                } else {
                    this.file[this.activeTab] = {}
                }
            },
            // 提交图片
            handleConfirm() {

                const file = this.file[this.activeTab];
                //
                if (file instanceof Array) {
                    const that = this;
                    file.forEach(item => {
                        that.handleConfirmItem(item)
                    })
                } else {
                    this.handleConfirmItem(file)
                }
            },
            handleConfirmItem(item) {
                if (!item.url) {
                    this.$message('请先选择文件');
                    return
                }
                let url = '';
                let resourceId = '';
                let videoCover = null;
                let fileData = {};
                const fileName = item.name;

                // 我的资源裁剪后的图片
                if (this.activeTab === 'MyResource' && item.file) {
                    this.$emit('handleLoading', true);
                    const param = new FormData(); // 创建form对象
                    param.append('file', item.file.raw, fileName); // 通过append向form对象添加数据
                    param.append('spaceId', this.spaceId[this.activeTab]);
                    param.append('typeStr', item.fileType);
                    param.append('addToRes', true);
                    if (this.uploadOption && this.uploadOption.modeObj) {
                        param.append('modelId', this.uploadOption.modeObj.modelId || '');
                        param.append('fieldName', this.uploadOption.modeObj.fieldName)
                    }
                    fileData = param;
                    this.$request.fetchUpload(param).then(res => {
                        if (res.code === 200) {
                            this.$message({
                                message: '上传成功',
                                type: 'success'
                            });
                            url = res.data.fileUrl;
                            resourceId = res.data.resourceId;
                            videoCover = res.data.videoCover
                        }
                        this.$emit('handleLoading', false)
                    }).catch(() => {
                        this.$emit('handleLoading', false)
                    });
                    if (url) {
                        const fileUrl = this.$getPath(url);
                        this.$emit('handleInsertHtml', this.getHtml(fileUrl, fileName, resourceId), {
                            url: fileUrl,
                            id: resourceId,
                            videoCover: videoCover,
                            fileName
                        }, fileData)
                    }
                } else {

                    this.$request.fetchUploadUrl({url:item.url}).then(res => {

                        url = item.url;
                        resourceId = res.data;
                        videoCover = item.videoCover;
                        this.$emit('handleInsertHtml', this.getHtml(url, fileName, resourceId), {
                            url: url,
                            id: resourceId,
                            videoCover: videoCover,
                            fileName
                        }, fileData)
                    })
                }

            },
            // 获取编辑器内的图片
            getImgList () {
                let editorId = window.localStorage.getItem('editor');
                let htmlContent = window.UE.getEditor(editorId).getContent();
                const regExp = /<img[^>]+src=['/>"]([^'"]+)['"]+/g;
                const regExp2 = /<img[^>]+alt=['/>"]([^'"]+)['"]+/g;
                const env = process.env.VUE_APP_ENV;
                const base = env !== 'dev' ? process.env.VUE_APP_API_HOST + process.env.VUE_APP_API_PREFIX : process.env.VUE_APP_API_HOST;

                let temp, temp2;
                while ((temp = regExp.exec(htmlContent)) != null ) {
                    let id = '',url;


                    temp2 = regExp2.exec(htmlContent);
                    if(temp2 != null){
                        url =  (/^http/.test(temp[1]) || env !== 'dev') ? temp[1] : temp[1].split(base);
                        id =  temp2[1]
                    }else{
                        url  =  temp[1]
                    }
                    let name = url.split('/').slice(-1).toString();
                    let alias = name.split('.')[0];
                    let suffix = '.' + name.split('.')[1];


                    this.tabs[0].result.push( {
                        'resourceType':1,
                        'alias':alias,
                        'suffix':suffix,
                        'url': url,
                        'disabled' :false,
                        'id': id
                    });
                }
            },
        },
        mounted() {
            this.getImgList()
        }
    }
</script>
<style lang="scss">
    .resource-lib-container {
        position: relative;

        .el-tabs.el-tabs--border-card {
            border-color: #e8e8e8;
            border-radius: 4px;

            > .el-tabs__header {
                background-color: #f0f0f0;

                .el-tabs__item {
                    font-size: 14px;
                    padding: 0 15px;
                    border: 0;
                    vertical-align: top;
                    height: 41px;
                    line-height: 40px;

                    &:not(.is-active) {
                        color: #666666;
                        background: #f0f0f0;
                    }
                }
            }

            > .el-tabs__content {
                padding: 20px 0;
                overflow-x: hidden;
                overflow-y: overlay;
                height: calc(80vh - 310px);

                .el-tab-pane,
                .resource-container {
                    height: 100%;
                }

                .resource-container {
                    display: flex;

                    .resource-select-wrap {
                        overflow-y: overlay;
                        overflow-x: hidden;
                        flex: 1;
                        padding-left: 20px;
                        border-left: 1px solid #e8e8e8;
                    }

                    .resource-list-wrap {
                        min-height: calc(100% - 58px);
                    }
                }

                // &:hover{
                //   &::-webkit-scrollbar {
                //     width: 10px;
                //     height: 10px;
                //   }
                // }
            }
        }

        // 搜索
        .search-wrap {
            position: absolute;
            right: 4px;
            top: 0;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .cut-wrap {
                width: 80px;
                font-size: 14px;
                display: flex;
                align-items: center;
                cursor: pointer;

                .jee-svg-icon {
                    font-size: 14px;
                    padding-right: 10px;
                    fill: #666666;
                }
            }
        }

        .search-wrap,
        .base-pagination-container {
            .el-input input.el-input__inner {
                border-color: #e8e8e8;
            }
        }
    }
</style>
